@import "../../style/public";
// 商城列表
.mall-list {
  .tabList{
    display: flex;
    @include remCalc(margin, 0,0,20,0);
    @include thin-border(false,false,bottom);
    background: #fff;
    li{
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      flex:1;
      text-align: center;
      color: #333;
      @include remCalc(font-size, 32);
      position: relative;
      &::before{
        position: absolute;
        content: "";
        width: 100%;
        @include remCalc(height, 4);
        @include remCalc(bottom, 0);
        left:0;
        background: #fff;
      }
      &.active{
        &::before{
          background: $color-red;
        }
      }
    }
  }
  .mainImg {
    display: block;
    width: 100%;
    @include remCalc(height, 420);
  }
 
  .form-title {
    color: #333;
    background-color: #fff;
    @include remCalc(height, 86);
    @include remCalc(line-height, 86);
    @include remCalc(font-size, 32);
    @include remCalc(padding, 0, 30);
  }
  .type-title{
    color: #333;
    @include remCalc(font-size, 32);
    @include remCalc(line-height, 88);
    @include remCalc(padding, 0,30);
    background: #fff;
    @include thin-border(true,false);
  }
  .product-list {
    display: flex;
    @include remCalc(margin, 0, 0, 30, 0);
    // @include remCalc(padding, 0, 30, 0, 30);
    @include remCalc(padding-left, 30);
    flex-flow: wrap;
    position: relative;
    li {
      @include remCalc(width, 330);
      @include remCalc(margin, 0, 30, 30, 0);
      img {
        display: block;
        @include remCalc(width, 330);
        @include remCalc(height, 280);
      }
      >div {
        background-color: #fff;
        @include remCalc(padding, 12, 12, 20, 12);
        border: 1px solid #eee;
         .name {
          color: #333;
          @include remCalc(height, 40);
          @include remCalc(font-size, 28);
          @extend %text-overflow;
        }
        .desc {
          color: #999;
          @include remCalc(font-size, 24);
          @include remCalc(padding-top, 12);
          @include remCalc(line-height, 34);
          //@include remCalc(max-height, 80);
          @include remCalc(height,68 );
          @extend %text-overflow-2;
        }
        .price {
          > span {
            color: #f5364e;
            @include remCalc(font-size, 32);
            @include remCalc(margin-right, 26);
            & + span {
              color: #ddd;
              @include remCalc(font-size, 24);
              text-decoration: line-through;
            }
          }
        }
      }
      &:nth-child(even) {
        @include remCalc(margin-right, 0);
      }
    }
  }
}
// 商品详情
.product-details {
  .userInfo{
    width:100%;
    height:100%;
    .page-body{
      margin-top: 0;
    }
    .form-style{
      @include remCalc(margin-top, 30);
    }
    .btn-wrap{
      @include remCalc(margin-top, 60);
    }
  }
  ._header {
    background: transparent;
    &:after {
      border-bottom: 1px solid transparent;
    }
  }
  .select-store {
    .tip-msg {
      color: #999;
      @include remCalc(font-size, 24);
      line-height: 1.5;
      text-align: left;
    }
    .blue-text {
      color: $color-red;
    }
  }
  .backBtn {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
    // background: #fff;
    color: #333;
    @include remCalc(font-size, 36);
    @include remCalc(line-height, 168);
    @include remCalc(padding, 0, 30);
    // @include thin-border(false, false, bottom);
    // @include remCalc(padding-top, 40);
    a {
      display: block;
      color: inherit;
    }
    .left {
      color: $color-red;
      @include remCalc(font-size, 30);
      text-align: left;
      @include remCalc(width, 160);
    }
  }
  .page-body {
    // @include remCalc(margin-top, -168);
    @include remCalc(margin-top, -128);
    .img-swipe-box {
      &.noMb{
        margin-bottom:0;
      }
      background-color: #fff;
      //@include remCalc(margin-bottom, 20);
      transform: translate3d(0, 0, 0);
      .img-swipe {
        @include remCalc(height, 680);
        transform: translate3d(0, 0, 0);
        img {
          display: block;
          width: 100%;
          @include remCalc(height, 680);
        }
      }
      .img-info {
        background-color: #fff;
        @include remCalc(padding, 20, 30, 20, 30);
        @include thin-border(true, false);
        > p {
          color: #333;
          @include remCalc(font-size, 28);
          & + p {
            color: #999;
            @include remCalc(font-size, 24);
            @include remCalc(padding-top, 12);
          }
          &:nth-child(3) {
            > span {
              color: #f5364e;
              @include remCalc(font-size, 32);
              @include remCalc(margin-right, 26);
              & + span {
                color: #999;
                @include remCalc(font-size, 24);
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
    .linebar-list-num {
      @include remCalc(margin-top, 20);
      .context-right {
        .num-box {
          position: relative;
          .buy-num {
            position: relative;
          }
        }
      }
    }
    .list-title {
      color: #999;
      @include remCalc(font-size, 24);
      @include remCalc(height, 68);
      @include remCalc(line-height, 68);
      @include remCalc(margin-left, 30);
    }
    .form-title-center {
      color: #999;
      text-align: center;
      @include remCalc(font-size, 24);
      @include remCalc(padding, 40, 0, 60, 0);
      i {
        color: $color-red;
        vertical-align: middle;
        @include remCalc(margin, 3, 6, 0, 0);
      }
      label {
        vertical-align: middle;
        span {
          color: $color-red;
        }
      }
    }
    .recive-info {
      background-color: #fff;
      @include remCalc(padding, 20, 30);
      @include thin-border(true, false);
      li {
        > div {
          display: flex;
          color: #333;
          @include remCalc(font-size, 32);
          > span {
            flex: 1;
            & + span {
              text-align: right;
            }
          }
          & + div {
            @include remCalc(margin-top, 20);
            p {
              flex: 1;
              color: #999;
              @include remCalc(font-size, 24);
            }
            i {
              color: #ccc;
              @include remCalc(font-size, 36);
            }
          }
        }
      }
    }
  }
  .total-buy {
    width: 100%;
    @include remCalc(height, 88);
    @include remCalc(line-height, 88);
    li {
      display: flex;
      p {
        flex: 1;
        text-align: center;
        &:first-child {
          background-color: #fff;
          @include remCalc(font-size, 36);
          // box-shadow: 0 -2px 8px 0 #cccccc;
          border-top: 1px solid $color-border;
          span {
            color: red;
          }
        }
        &:last-child {
          color: #fff;
          background-color: $color-red;
          @include remCalc(font-size, 36);
          // box-shadow: 0 -2px 8px 0 $color-red;
        }
      }
    }
  }
}
// 收货人信息
.receiver-info {
  .page-body {
    margin-top: 0;
  }
  .form-style-top {
    @include remCalc(margin, 30, 0, 60, 0);
    .area {
      .select-btn {
        div {
          flex: 1;
          text-align: left !important;
        }
      }
      i {
        color: #ccc;
        @include remCalc(margin-top, 6);
        @include remCalc(font-size, 32);
      }
    }
  }
}
// 订购记录
.order-record {
  // .mint-navbar {
  //   .mint-tab-item {
  //     &.is-selected {
  //       // @include remCalc(margin-bottom, none);
  //        margin-bottom: none !important;
  //       // border-bottom: 3px solid #666;
  //       @include remCalc(border-bottom, 3px solid #666);
  //     }
  //   }
  // }
  .page-body {
    .form-style-top {
      background-color: #f9f9f9;
      @include remCalc(margin-top, 20);
      .form-style-box {
        @include remCalc(margin-bottom, 20);
        background-color: #fff;
        @include thin-border(true, false);
        .order-time {
          @include remCalc(padding, 18, 30, 18, 0);
          @include remCalc(line-height, 24);
          @include remCalc(margin-left, 30);
          @include remCalc(font-size, 24);
          @include thin-border(false, false, bottom);
          display: flex;
          span {
            flex: 1;
          }
          > div {
            &.color-red {
              color: #f5364e;
            }
            &.color-yellow {
              color: $color-yellow;
            }
          }
        }
        .order-list {
          display: flex;
          @include remCalc(padding, 20, 30, 20, 0);
          @include remCalc(margin-left, 30);
          @include thin-border(false, false, bottom);
          .context-left {
            @include remCalc(margin-right, 20);
            .mainImg {
              border: 1px solid #ddd;
              display: inline-block;
              @include remCalc(width, 120);
              @include remCalc(height, 120);
            }
          }
          .context-right {
            flex: 1;
            @include remCalc(padding-top, 16);
            > div {
              display: flex;
              color: #333;
              @include remCalc(font-size, 28);
              @include remCalc(margin-bottom, 20);
              > span {
                & + span {
                  text-align: right;
                  flex: 1;
                }
              }
              & + div {
                display: flex;
                color: #999;
                @include remCalc(font-size, 24);
                > span {
                  & + span {
                    text-align: right;
                    flex: 1;
                  }
                }
              }
            }
          }
        }
        .total-right {
          text-align: right;
          @include remCalc(padding, 20, 30, 20, 0);
          @include remCalc(margin-left, 30);
          > p {
            color: #333;
            @include remCalc(font-size, 28);
            @include remCalc(margin-bottom, 14);
            span {
              color: #151515;
            }
          }
          .now-pay {
            color: #fff;
            background-color: $color-red;
            @include remCalc(border-radius, 28);
            @include remCalc(font-size, 28);
            @include remCalc(padding, 9, 16);
            display: inline-block;
          }
          .check-logistics {
            color: $color-red;
            border: 1px solid $color-red;
            @include remCalc(border-radius, 28);
            @include remCalc(font-size, 28);
            @include remCalc(padding, 9, 16);
            display: inline-block;
          }
        }
      }
    }
    // .page-infinite-loading {
    //   span {
    //     display: inline-block;
    //   }
    // }
    .no-more {
      text-align: center;
      color: #999;
      @include remCalc(font-size, 24);
      @include remCalc(padding-top, 10);
      @include remCalc(padding-bottom, 20);
    }
  }
}
// 订单详情
.order-details {
  -webkit-user-select: text;
  .shop-ul {
    color: #333;
    background-color: #fff;
    @include remCalc(margin-bottom, 20);
    li {
      @include remCalc(font-size, 30);
      @include remCalc(padding, 20, 30, 20, 0);
      @include remCalc(margin-left, 30);
      &:nth-of-type(1) {
        @include remCalc(margin-left, 0);
        @include remCalc(padding, 20, 30);
      }
      &:not(:last-of-type) {
        @include thin-border(false, false, bottom);
      }
    }
  }
  .order-state {
    position: relative;
    display: flex;
    color: #fff;
    @include remCalc(padding, 58, 60);
    background-image: linear-gradient(78deg, rgba(73, 75, 255, 0.82) 8%, rgba(10, 141, 254, 0.82) 100%);
    i {
      @include remCalc(font-size, 88);
    }
    .order-info {
      color: #fff;
      @include remCalc(margin-left, 40);
      > p {
        &.vertical-center {
          @include remCalc(margin-top, 24);
        }
        @include remCalc(font-size, 32);
        & + p {
          @include remCalc(font-size, 24);
          @include remCalc(margin-top, 20);
        }
      }
    }
    .order-btn {
      position: absolute;
      @include remCalc(right, 60);
      text-align: right;
      color: #fff;
      border: 1px solid #fff;
      @include remCalc(border-radius, 26);
      @include remCalc(font-size, 24);
      @include remCalc(padding, 7, 26);
      @include remCalc(margin-top, 24);
      display: inline-table;
    }
    // > div {
    //   // flex: 1;
    //   @include remCalc(margin-left, 40);
    //   > p {
    //     @include remCalc(font-size, 24);
    //     &:first-child {
    //       color: #fff;
    //       @include remCalc(font-size, 32);
    //     }
    //   }
    //   > div {
    //     display: flex;
    //     p {
    //       @include remCalc(font-size, 24);
    //       @include remCalc(margin-top, 10);
    //       flex: 1;
    //     }
    //     .cancel-order {
    //       color: #fff;
    //       border: 1px solid #fff;
    //       @include remCalc(border-radius, 26);
    //       @include remCalc(font-size, 24);
    //       @include remCalc(padding, 7, 26);
    //       @include remCalc(margin-left, 40);
    //       display: inline-table;
    //     }
    //   }
    //   .delivered {
    //     display: flex;
    //     div {
    //       flex: 1;
    //     }
    //     span {
    //       color: #fff;
    //       border: 1px solid #fff;
    //       @include remCalc(border-radius, 26);
    //       @include remCalc(font-size, 24);
    //       @include remCalc(padding, 7, 26);
    //       @include remCalc(margin, 40, 0, 0, 40);
    //       display: inline-table;
    //     }
    //   }
    // }
    // .check-logistics {
    //   // text-align: right;
    //   color: #fff;
    //   border: 1px solid #fff;
    //   @include remCalc(border-radius, 28);
    //   @include remCalc(font-size, 24);
    //   @include remCalc(padding, 9, 16);
    //   display: inline-block;
    //   @include remCalc(margin, 10,0,10,30);
    // }
  }
  .recive-info {
    background-color: #fff;
    @include remCalc(padding, 20, 30);
    @include thin-border(true, false);
    li {
      display: flex;
      .context-left {
        flex: 1;
        @include remCalc(margin-left, 20);
        div {
          // display: flex;
          @include remCalc(font-size, 32);
          @include remCalc(margin-bottom, 20);
          > span {
            color: #333;
            & + span {
              // flex: 1;
              color: #666;
              @include remCalc(margin-left, 60);
            }
          }
        }
        p {
          color: #999;
          @include remCalc(font-size, 22);
        }
      }
      i {
        color: $color-red;
        @include remCalc(font-size, 32);
        @include remCalc(margin-top, 10);
      }
    }
  }
  .form-style-top {
    background-color: #fff;
    @include remCalc(margin, 20, 0, 20, 0);
    @include thin-border(true, false);
    .order-time {
      color: #333;
      @include remCalc(padding, 18, 30, 18, 0);
      @include remCalc(line-height, 24);
      @include remCalc(margin-left, 30);
      @include remCalc(font-size, 24);
      @include thin-border(false, false, bottom);
      // display: flex;
      i {
        @include remCalc(margin-right, 14);
      }
      span {
        // flex: 1;
      }
    }
    .order-list {
      display: flex;
      @include remCalc(padding, 20, 30, 20, 0);
      @include remCalc(margin-left, 30);
      @include thin-border(false, false, bottom);
      .context-left {
        @include remCalc(margin-right, 20);
        img {
          border: 1px solid #ddd;
          display: inline-block;
          @include remCalc(width, 120);
          @include remCalc(height, 120);
        }
      }
      .context-right {
        flex: 1;
        @include remCalc(padding-top, 16);
        > div {
          display: flex;
          color: #333;
          @include remCalc(font-size, 28);
          @include remCalc(margin-bottom, 20);
          > span {
            & + span {
              text-align: right;
              flex: 1;
            }
          }
          & + div {
            display: flex;
            color: #999;
            @include remCalc(font-size, 24);
            > span {
              & + span {
                text-align: right;
                flex: 1;
              }
            }
          }
        }
      }
    }
    .total-right {
      text-align: right;
      @include remCalc(padding, 20, 30, 20, 0);
      @include remCalc(margin-left, 30);
      > p {
        color: #333;
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 14);
        span {
          color: #151515;
        }
      }
      .now-pay {
        color: #fff;
        background-color: $color-red;
        @include remCalc(border-radius, 28);
        @include remCalc(font-size, 28);
        @include remCalc(padding, 9, 16);
        display: inline-block;
      }
      .check-logistics {
        color: $color-red;
        border: 1px solid $color-red;
        @include remCalc(border-radius, 28);
        @include remCalc(font-size, 28);
        @include remCalc(padding, 9, 16);
        display: inline-block;
      }
    }
  }
  .inventory-list {
    // @include remCalc(margin-top, 20);
    @include remCalc(padding, 20, 30, 8, 30);
    background: #fff;
    @include thin-border(false, false, top);
    li {
      display: flex;
      @include remCalc(margin-bottom, 12);
      @include remCalc(font-size, 24);
      color: #999;
      > div {
        & + div {
          flex: 1;
          text-align: right;
          span {
          }
        }
      }
    }
  }
  .linebar-list {
    @include remCalc(margin-bottom, 20);
  }
  .linebar-list-top {
    > li {
      > div {
        & + div {
          span {
            color: #f5364e;
          }
        }
      }
    }
  }
  .form-style {
    >li{
      >div{
       word-break: break-all;
      }
    }
    .none {
      color: #999;
    }
  }
  .orderbottom-info {
    -webkit-user-select: text;
    color: #333;
    @include remCalc(padding, 49, 30);
    @include remCalc(font-size, 24);
    p {
      @include remCalc(margin-bottom, 12);
      .agreement {
        color: $color-red;
        @include remCalc(margin-bottom, 5);
      }
      .service {
        color: $color-red;
        @include remCalc(margin-left, 150);
      }
      .copy {
        color: $color-red;
        border: 1px solid $color-red;
        @include remCalc(border-radius, 20);
        @include remCalc(font-size, 24);
        @include remCalc(padding, 6, 10);
        @include remCalc(margin-left, 10);
      }
    }
  }
  .btn-wrap {
    @include remCalc(padding, 0);
    .btn{
      border-radius: 0;
    }
  }
}
// 支付结果
.pay-result {
  .head {
    border-bottom: none;
  }
  p {
    text-align: center;
    @include remCalc(font-size, 26);
    @include remCalc(margin-bottom, 40);
    color: #999;
  }
  .result-btn {
    display: flex;
    @include remCalc(font-size, 32);
    background-color: #fff;
    @include remCalc(padding-bottom, 88);
    justify-content: center;
    > li {
      color: $color-red;
      border: 1px solid $color-red;
      @include remCalc(border-radius, 12);
      background-color: #fff;
      text-align: center;
      @include remCalc(padding, 13, 46);
      & + li {
        color: #fff;
        background-color: $color-red;
        @include remCalc(margin-left, 30);
      }
    }
  }
}
//服务协议
.service-contract {
  .page-body {
    margin-top: 0;
    @include remCalc(padding, 0, 30, 20, 30);
    h3 {
      text-align: center;
      @include remCalc(font-size, 30);
      @include remCalc(line-height, 60);
    }
    h4 {
      text-align: center;
      @include remCalc(font-size, 28);
      @include remCalc(line-height, 50);
    }
    p {
      @include remCalc(font-size, 24);
      @include remCalc(line-height, 40);
    }
  }
}
// 押金反还协议
.return-deposit {
  .page-body {
    @include remCalc(padding, 0, 30, 20, 30);
    h3 {
      text-align: center;
      @include remCalc(font-size, 30);
      @include remCalc(line-height, 60);
    }
    h4 {
      text-align: center;
      @include remCalc(font-size, 28);
      @include remCalc(line-height, 50);
    }
    p {
      @include remCalc(font-size, 24);
      @include remCalc(line-height, 40);
    }
  }
}
// 查看物流
.view-logistics {
  .info {
    background: #fdfcec;
    @include thin-border(false, false, bottom);
    // @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    color: #f87c36;
    @include remCalc(font-size, 20);
    @include remCalc(padding, 10, 30);
    position: relative;
    i {
      @include remCalc(margin-right, 12);
      @include remCalc(font-size, 32);
      position: absolute;
      @include remCalc(top, 24);
    }
    span {
      @include remCalc(margin-left, 42);
    }
  }
  .ulform-style {
    @include thin-border(true, false);
    background: #fff;
    @include remCalc(margin-bottom, 20);
    .order-time {
      -webkit-user-select: text;
      @include remCalc(padding, 18, 30, 18, 30);
      @include remCalc(line-height, 24);
      @include remCalc(font-size, 24);
      display: flex;
      span {
        flex: 1;
        &.col-red {
          color: #f5364e;
        }
      }
      > div {
      }
    }
    .order-list {
      @include remCalc(padding, 20, 30, 20, 0);
      // @include remCalc(padding, 20, 30, 20, 0);
      @include remCalc(margin-left, 30);
      @include thin-border(false, false, top);
      .shop-name {
        display: flex;
        color: #999;
        @include remCalc(font-size, 24);
        @include remCalc(margin-bottom, 20);
        i {
          @include remCalc(margin-right, 20);
        }
        span {
          display: inline-block;
          @include remCalc(margin-top, -4);
        }
      }
      .context-box {
        display: flex;
        .context-left {
          @include remCalc(margin-right, 20);
          img {
            border: 1px solid #ddd;
            display: inline-block;
            @include remCalc(width, 120);
            @include remCalc(height, 120);
          }
        }
        .context-right {
          flex: 1;
          @include remCalc(padding-top, 16);
          > div {
            display: flex;
            color: #333;
            @include remCalc(font-size, 28);
            @include remCalc(margin-bottom, 20);
            > span {
              & + span {
                text-align: right;
                flex: 1;
              }
            }
            & + div {
              display: flex;
              color: #999;
              @include remCalc(font-size, 24);
              > span {
                flex: 1;
                // & + span {
                //   text-align: right;
                //   // flex: 1;

                //     color: $color-red;
                //     border: 1px solid $color-red;
                //     @include remCalc(border-radius, 28);
                //     @include remCalc(font-size, 28);
                //     @include remCalc(width, 20);
                //     @include remCalc(padding, 9, 3);
                //     display: inline-block;

                // }
              }
            }
          }
        }
      }
      .logistics-blue {
        color: $color-red;
        border: 1px solid $color-red;
        @include remCalc(border-radius, 28);
        @include remCalc(font-size, 28);
        @include remCalc(width, 116);
        @include remCalc(height, 48);
        @include remCalc(line-height, 48);
        text-align: center;
        @include remCalc(margin-top, 38);
        // @include remCalc(padding, 2, 3);
        // display: inline-block;
      }
      .logistics-gray {
        color: #999;
        border: 1px solid #999;
        @include remCalc(border-radius, 28);
        @include remCalc(font-size, 28);
        @include remCalc(width, 116);
        @include remCalc(height, 48);
        @include remCalc(line-height, 48);
        text-align: center;
        @include remCalc(margin-top, 38);
        // @include remCalc(padding, 2, 3);
        // display: inline-block;
      }
    }
  }
}
.ul-contract {
  li:nth-of-type(2) {
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding-top, 0);
    &:after {
      border: none;
    }
  }
}
.concat-modal {
  @include remCalc(font-size, 32);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0,0,0,.4);
  &_content {
    @include remCalc(width, 600);
    @include remCalc(border-radius, 14);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-sizing: border-box;
  }
  &_top {
    @include remCalc(padding-top, 30);
    text-align: center;
    p:nth-of-type(2) {
      @include remCalc(padding-top, 10);
      @include remCalc(font-size, 24);
      color: #666;
    }
  }
  &_close {
    position: absolute;
    @include remCalc(top, 15);
    @include remCalc(right, 15);
  }
  &_inner {
    @include remCalc(padding, 30, 20);
    @include remCalc(font-size, 28);
    @include remCalc(max-height, 450);
    overflow-y: auto;
  }
  &_bottom {
    button {
      @include remCalc(line-height, 88);
      @include remCalc(height, 88);
      @include thin-border(true, false, top);
      text-align: center;
      color: #49A9F0;
      border: none;
      width: 100%;
      background-color: transparent;
    }
  }
}